<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例2</title>
    <script>
        function addNode(){
            const ul = document.getElementsByTagName("ul")[0]
            const li = document.createElement("li")
            const nameInput = document.getElementById("name")

            li.innerText = nameInput.value

            //在容器的末尾添加
            // ul.appendChild(li)
            //在容器的开头添加
            ul.insertBefore(li,ul.firstElementChild)

            nameInput.value = ""
        }

        function removeLastNode(){
            const ul = document.getElementsByTagName("ul")[0]
            ul.removeChild(ul.lastElementChild)
        }
    </script>
</head>
<body>
    <input id="name" placeholder="请输入名称"/>
    <button onclick="addNode()">添加节点</button>
    <button onclick="removeLastNode()">删除最后一个节点</button>
    <ul>
        <li>小明</li>
        <li>小红</li>
        <li>小李</li>
    </ul>
</body>
</html>